import { Link, useNavigate } from 'react-router-dom'
import {
  Table,
  Tag,
  Space,
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Modal,
} from 'antd'
import {
  EditOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
// import 'moment/locale/zh-cn'
// import locale from 'antd/es/date-picker/locale/zh_CN'
// 文章默认封面图片
import img404 from '@/assets/error.png'
import { useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { deleteArticleAction, getArticleAction } from '@/store/modules/article'
// 导入抽离频道组件
import Channel from '@/components/channel'
// 解构静态属性的组件名
const { RangePicker } = DatePicker

// table配置(固定的=》不需要跟随状态变更)
// 优化文章状态的处理（枚举/数据字典）
const articleStatus = {
  0: { color: 'yellow', text: '草稿' },
  1: { color: '#ccc', text: '待审核' },
  2: { color: 'green', text: '审核通过' },
  3: { color: 'red', text: '审核失败' },
}

const Article = () => {
  const dispatch = useDispatch()
  const nav = useNavigate()
  // 组件挂在执行一次
  useEffect(() => {
    // 获取所有文章数据
    dispatch(getArticleAction({}))
  }, [dispatch])
  // 2. 获取频道数据
  const {
    articleList,
    query: { page, per_page, total_count },
  } = useSelector((state) => state.article)
  // 使用useRef存储值=》状态变化的情况下会留存数据，同时修改值不会自刷新
  let searchParams = useRef({})
  // 3. 分页功能=> 点击页码或每页条数切换都会触发回调
  const changePage = (page, pageSize) => {
    console.log('分页：', page, pageSize, searchParams.current)
    // 查询指定条件的文章数据
    dispatch(
      getArticleAction({
        // 联动上边已经选择的搜索条件
        ...searchParams.current,
        page,
        per_page: pageSize,
      })
    )
  }
  // 4. 搜索功能
  const search = ({ status, channel_id, date }) => {
    // console.log('搜索文章的条件：', formData)
    /**
     * 1. 获取搜索文章的条件： formData
     * 2. 使用formData的条件数据重新查询文章列表数据
     */
    // 组装查询条件参数(后台api需要的)
    const params = {
      channel_id,
      // 和分页参数联动
      page,
      per_page,
    }
    // 处理文章状态和时间格式
    // 1. 排除全部
    if (status !== -1) {
      params.status = status
    }
    // 2. 判断date是否存在 => !!date 判断date是否空 | null | undefined
    if (!!date) {
      params.begin_pubdate = date[0].format('YYYY-MM-DD')
      params.end_pubdate = date[1].format('YYYY-MM-DD')
    }
    // 存储搜索条件
    searchParams.current = params
    console.log('搜索文章的条件：', params, searchParams)
    dispatch(getArticleAction(params))
  }
  // 5. 删除文章
  const delArticle = (id) => {
    Modal.confirm({
      title: '温馨提示',
      icon: <ExclamationCircleOutlined />,
      content: '此操作将永久删除该文章, 是否继续?',
      onOk: () => {
        // 执行删除操作
        dispatch(deleteArticleAction(id, searchParams.current))
      },
    })
  }
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      /**
       * 指定了dataIndex情况
       * @param {*} cover dataIndex指定字段的值
       * @param {*} row 当前行
       * @param {*} index 索引
       * @returns
       */
      render: (cover, row, index) => {
        return (
          <img
            src={cover.images[0] || img404}
            width={200}
            height={150}
            alt=""
          />
        )
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 220,
    },
    {
      title: '状态',
      dataIndex: 'status',
      // 文章状态：0-草稿，1-待审核，2-审核通过，3-审核失败
      render: (data) => (
        <Tag color={articleStatus[data].color}>{articleStatus[data].text}</Tag>
      ),
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      /**
       * 没有指定dataInde
       * @param {*} row 当前行
       * @returns
       */
      render: (row) => {
        // console.log('row:', row)
        return (
          <Space size="middle">
            <Button
              onClick={() => {
                nav(`/publish/${row.id}`)
              }}
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            />
            <Button
              type="primary"
              onClick={() => delArticle(row.id)}
              danger
              shape="circle"
              icon={<DeleteOutlined />}
            />
          </Space>
        )
      },
    },
  ]

  return (
    <div>
      {/* 1. 搜索 */}
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
        style={{ marginBottom: 20 }}
      >
        {/* 搜索表单 */}
        <Form onFinish={search} initialValues={{ status: -1 }}>
          {/* 条件1：文章状态 */}
          <Form.Item label="状态" name="status">
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>
          {/* 条件2：文章频道 */}
          <Form.Item label="频道" name="channel_id">
            {/* 之前：这里放的Select组件，在表单下会自动做受控处理
             如何让Channel组件自动受控？
             Channel组件接收 value + onChange
             */}
            <Channel width={266} />
          </Form.Item>
          {/* 条件3：文章发布的日期 */}
          <Form.Item label="日期" name="date">
            <RangePicker></RangePicker>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 2. 文章列表 */}
      <Card title={`根据筛选条件共查询到 total 条结果：${total_count}`}>
        {/* 
         rowKey='id' 统一指定列表key属性
         columns：表格列的配置描述
         dataSource：后台返回的列表数据
         */}
        <Table
          rowKey="id"
          columns={columns}
          dataSource={articleList}
          pagination={{
            total: total_count, // 总条数
            position: ['topLeft'], // 位置
            current: page, // 当前页码
            pageSize: per_page, // 每页条数
            onChange: changePage, // 切页
          }}
        />
      </Card>
    </div>
  )
}

export default Article
